<template>
    <div class="user web-inner">
        <div class="common-title">
            <span class="title-left">開店+會員</span>
        </div>
        <el-tabs type="border-card">
            <el-tab-pane label="會員資料修改">
                <div class="form">
                    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="註冊賬號" prop="account">
                            <el-input  v-model="ruleForm.account"></el-input>
                        </el-form-item>
                        <el-form-item label="密碼" prop="pwd">
                            <el-input type="password" v-model="ruleForm.pwd"></el-input>
                        </el-form-item>
                        <el-form-item label="確認密碼" prop="rePwd">
                            <el-input type="password" v-model="ruleForm.rePwd"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名" prop="name">
                            <el-input  v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="電話" prop="tel">
                            <el-input v-model="ruleForm.tel"></el-input>
                        </el-form-item>
                        <el-form-item label="行動電話" prop="m_phone">
                            <el-input v-model="ruleForm.m_phone"></el-input>
                        </el-form-item>
                        <el-form-item label="E-mail" prop="email">
                            <el-input :disabled="true" v-model="ruleForm.email"></el-input>
                        </el-form-item>
                        <el-form-item label="驗證碼" prop="phrase">
                            <img  style="height: 40px;vertical-align: middle;cursor: pointer" :src="imgUrl1" alt="">

                            <el-input style="display: inline-block;width: 200px;margin: 10px;" v-model="ruleForm.phrase"/>
                            <a @click="refresh" href="javascript:;">看不清？點擊刷新</a>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">送出</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="媒和配對">
                <div class="peidui">
                    <div class="tips">
                        以下是配對出來與您同類型的需求：
                    </div>
                    <div class="page">
                        <div v-for="item in pageContent" class="page-item">
                            <div class="left">
                                <img :src="brandImg+item.brand_logo" alt="">
                            </div>
                            <div class="center">
                                <div class="title">
                                    {{item.brand_name}}
                                </div>
                                <div class="text">加盟金：{{item.fran_fee}}</div>
                                <div class="text">加盟專線：{{item.fran_tel}}</div>
                                <div class="text">總部地址：{{item.frad_addr}}</div>
                                <div class="desc" v-html="item.intro_text"></div>
                            </div>
                            <div class="right">
                                <a :href="'#/detail/'+item.brand_id">
                                    <img src="../../static/img/btn4.png" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="角色管理">加盟需求</el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
  import qs from 'qs';
  import utils from "../common/utils"
  export default {
    name: "user",
    data() {
      var checkAccount=(rule, value, callback) => {
        var temp = /^[a-zA-Z0-9]{6}$/;
        if(value===""){
          callback(new Error('必填'));
        }
        if(this.ruleForm.account==this.defaultData.account){
          callback();
        }
        if(temp.test(value) && this.ruleForm.account!==this.defaultData.account){
          this.$http({
            method:"post",
            url:this.API.check_account_name,
            data:qs.stringify({account:value}),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            withCredentials:true
          }).then((res) => {
            if(res.status ===200 && res.data[0].result===0){
              callback();
            }else{
              callback(new Error('該賬號已被使用！'));
            }
          })
        }else{
          callback(new Error('請輸入6個英文字母或數字組合'));
        }
      };
      var checkPwd=(rule, value, callback) => {
        var temp = /^[a-zA-Z0-9]{8}$/;
        if(value===""){
          callback(new Error('必填'));
        }
        if(!temp.test(value)){
          callback(new Error('請輸入8個英文字母或數字組合'));
        }
        if(this.ruleForm.rePwd!==""&& this.ruleForm.rePwd===value || this.ruleForm.rePwd===""){
          callback();
        }else{
          callback(new Error('請輸入8個英文字母或數字組合'));
        }
      };
      var checkRepwd=(rule, value, callback) => {
        var temp = /^[a-zA-Z0-9]{8}$/;
        if(value===""){
          callback(new Error('必填'));
        }
        if(!temp.test(value)){
          callback(new Error('請輸入8個英文字母或數字組合'));
        }
        if(this.ruleForm.pwd!==""&& this.ruleForm.pwd===value || this.ruleForm.pwd===""){
          callback();
        }else{
          callback(new Error('兩次輸入的密碼不一致'));
        }
      };
      var checkEmail=(rule, value, callback) => {
        var temp = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if(value===""){
          callback(new Error('必填'));
        }
        if(!temp.test(value)){
          callback(new Error('請輸入正確的郵箱'));
        }
        callback();
      };
      var checkPhone = (rule, value, callback) => {
        let mobilePatternTW = /^(\+886\s)?[0]{1}[9]{1}\d{8}$/;
        if(mobilePatternTW.test(value)){
          callback();
        }else{
          callback(new Error('請輸入正確的電話號碼'));
        }
      };
      return {
        defaultData:{},
        imgUrl1:"/webroot/session.php",
        ruleForm:{
          account:utils.getCookie("kd_user_account"),
          pwd:"",
          rePwd:"",
          name:utils.getCookie("kd_user_name"),
          tel:utils.getCookie("kd_user_tel"),
          m_phone:utils.getCookie("kd_user_mphone"),
          email:utils.getCookie("kd_email"),
          phrase:"",
        },
        rules: {
          account: [
            { validator:checkAccount,required: true, trigger: 'blur' },
          ],
          pwd: [
            { required: true,validator:checkPwd, trigger: 'blur' },
          ],
          rePwd: [
            { required: true,validator:checkRepwd, trigger: 'blur' },
          ],
          name: [
            { required: true, message: '必填', trigger: 'blur' }
          ],
          tel: [
            { required: true, message: '必填', trigger: 'blur' }
          ],
          m_phone: [
            { required: true,message: '必填',validator:checkPhone, trigger: 'blur' }
          ],
          email: [
            { required: true,validator:checkEmail, trigger: 'blur' }
          ],
          phrase: [
            { required: true,message: '必填', trigger: 'blur' }
          ],
        },
        pageContent:[]
      }
    },
    mounted() {
      this.getData();
      this.defaultData={
            account:utils.getCookie("kd_user_account"),
            pwd:"",
            rePwd:"",
            name:utils.getCookie("kd_user_name"),
            tel:utils.getCookie("kd_user_tel"),
            m_phone:utils.getCookie("kd_user_mphone"),
            email:utils.getCookie("kd_email"),
            phrase:"",
      };
      this.ruleForm = Object.assign({},this.defaultData)
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.sendData();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      refresh() {
        this.imgUrl1="/webroot/session.php?"+new Date().getTime()
      },
      sendData() {
        let data = {};
        if(this.ruleForm.account!==this.defaultData.account){
          data.account=this.ruleForm.account
        }
        if(this.ruleForm.pwd!==this.defaultData.pwd){
          data.pwd=this.ruleForm.pwd
        }
        if(this.ruleForm.name!==this.defaultData.name){
          data.name=this.ruleForm.name
        }
        if(this.ruleForm.tel!==this.defaultData.tel){
          data.tel=this.ruleForm.tel
        }
        if(this.ruleForm.m_phone!==this.defaultData.m_phone){
          data.m_phone=this.ruleForm.m_phone
        }
        if(this.ruleForm.phrase!==this.defaultData.phrase){
          data.phrase=this.ruleForm.phrase
        }
        data.kd_user_login=utils.getCookie("kd_user_login"),
        this.$http({
          method:"post",
          url:this.API.user_update,
          data:qs.stringify(data),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          withCredentials:true
        }).then((res) => {
          this.refresh()

          if(res.data[0].code==="101"){
            this.resetForm("ruleForm");
            this.$alert(this.formTips, '成功', {
              confirmButtonText: '确定',
              callback: action => {
                location.href="#/login"
              }
            });

          }else{
            this.$alert(res.data[1].desc, '提示', {
              confirmButtonText: '确定',
            });
          }
        })
      },
      getData() {
        this.$http({
          method:"post",
          url: this.API.user_get_brand,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          data: qs.stringify({keyword:utils.getCookie("kd_user_brand_category")})
        }).then((res) => {
          if(res.status ===200 && res.data){
            this.pageContent = res.data;
          }
        })
      },
    }
  }
</script>

<style scoped lang="less">
    @import "../style/base";
    .user{
        margin: 0 auto;
        padding:50px 0px;
        .form{
            width: 600px;
        }
        .peidui{
            .tips{
                font-size: 22px;
                margin: 20px 0;
            }
        }
        .page{
            .page-item{
                padding: 20px;
                border: 1px solid #e6e6e6;
                border-radius: 10px;
                margin-bottom: 20px;
                display: flex;
                flex-direction: row;
                align-items: center;
                .left{
                    width: 200px;
                    img{
                        width: 100%;
                    }
                }
                .center{
                    flex: 1;
                    margin: 0 20px;
                    .title{
                        font-size: 22px;
                        color: #275d98;
                        margin-bottom: 10px;
                    }
                    .text{
                        font-size: 14px;
                        color: #000000;
                        line-height: 22px;
                    }
                    .desc{
                        margin-top: 20px;
                        font-size: 14px;
                        color: #000000;
                        line-height: 22px;

                    }
                }
                .right{
                    width: 150px;
                    img{
                        width: 100%;
                    }
                }
            }
        }
    }

</style>